<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鱿鱼游戏 - 追逐竞技</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <!-- 游戏开始界面 -->
        <div id="startScreen" class="screen active">
            <div class="game-title">
                <h1>🦑 鱿鱼游戏</h1>
                <p class="subtitle">追逐竞技挑战</p>
            </div>
            <div class="game-modes">
                <button class="mode-btn" data-mode="redlight">
                    <span class="mode-icon">🚦</span>
                    <span class="mode-name">红灯绿灯停</span>
                    <span class="mode-desc">听到绿灯时前进，红灯时停止</span>
                </button>
                <button class="mode-btn" data-mode="woodman">
                    <span class="mode-icon">🤖</span>
                    <span class="mode-name">一二三木头人</span>
                    <span class="mode-desc">背身时前进，转身时停止</span>
                </button>
            </div>
            <div class="game-instructions">
                <h3>游戏规则</h3>
                <ul>
                    <li>跟随指令移动，违规将被淘汰</li>
                    <li>在规定时间内到达终点获胜</li>
                    <li>反应速度和准确性决定胜负</li>
                </ul>
            </div>
        </div>

        <!-- 游戏界面 -->
        <div id="gameScreen" class="screen">
            <div class="game-header">
                <div class="game-info">
                    <span class="timer">⏱️ <span id="timeDisplay">00:00</span></span>
                    <span class="players">👥 <span id="playersDisplay">10</span></span>
                    <span class="round">🎯 第 <span id="roundDisplay">1</span> 轮</span>
                </div>
                <div class="controls">
                    <button id="pauseBtn">⏸️ 暂停</button>
                    <button id="restartBtn">🔄 重新开始</button>
                    <button id="menuBtn">📋 菜单</button>
                </div>
            </div>
            
            <div class="game-area">
                <div class="game-field">
                    <div class="start-line">起点</div>
                    <div class="finish-line">终点</div>
                    <div id="gameCanvas"></div>
                </div>
                <div class="side-panel">
                    <div class="status-display">
                        <h4>游戏状态</h4>
                        <div id="statusText">准备开始...</div>
                        <div id="commandText" class="command-text"></div>
                    </div>
                    <div class="player-list">
                        <h4>玩家列表</h4>
                        <div id="playerList"></div>
                    </div>
                </div>
            </div>

            <div class="mobile-controls">
                <button id="moveBtn" class="control-btn">🏃 移动</button>
                <button id="stopBtn" class="control-btn">🛑 停止</button>
            </div>
        </div>

        <!-- 游戏结束界面 -->
        <div id="endScreen" class="screen">
            <div class="result-container">
                <h2 id="resultTitle">游戏结束</h2>
                <div class="result-stats">
                    <div class="stat">
                        <span class="stat-label">最终排名</span>
                        <span class="stat-value" id="finalRank">#1</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">存活时间</span>
                        <span class="stat-value" id="survivalTime">00:00</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">移动次数</span>
                        <span class="stat-value" id="moveCount">0</span>
                    </div>
                </div>
                <div class="result-actions">
                    <button id="playAgainBtn">🔄 再玩一次</button>
                    <button id="backToMenuBtn">📋 返回菜单</button>
                </div>
            </div>
        </div>
    </div>

    <script src="sounds.js"></script>
    <script src="script.js"></script>
</body>
</html>